<template>
  <el-container>
    <el-header height="80px">
      <router-link :to="{ name: 'Home' }">
        <img height="50" :src="logo" alt="logo" />
      </router-link>
      <ul>
        <li>
          <router-link
            exact-active-class="active"
            :to="{ name: 'Home' }"
          >home</router-link>
        </li>
        <li>
          <router-link
            exact-active-class="active"
            :to="{ name: 'About' }"
          >about</router-link>
        </li>
      </ul>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :router="true"
          :uniqueOpened="true"
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          @select="onSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="0" :route="{ name: 'Home' }">
            <i class="el-icon-user"></i>
            <template #title>profile</template>
          </el-menu-item>
          <el-menu-item index="1" :route="{ name: 'Contact' }">
            <i class="el-icon-menu"></i>
            <template #title>联系人</template>
          </el-menu-item>
          <el-menu-item index="2" :route="{ name: 'Article' }">
            <i class="el-icon-setting"></i>
            <template #title>文章管理</template>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <template #title>不能点击</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import logo from '@/assets/logo.png'

export default {
  name: "AdminLayout",
  data() {
    return {
      logo,
      defaultActive: '0',
    };
  },
  methods: {
    onSelect(option) {
      this.defaultActive = option
      // console.log(this.defaultActive)
    }
  }
};
</script>

<style scoped lang="less">
.el-header {
  background-color: #ff9796;
  display: flex;
  align-items: center;

  ul {
    display: flex;
    align-items: center;
    margin: 0;
    list-style: none;

    li {
      padding: 0 10px;

      a {
        color: #fff;
        font-size: 20px;

        &.active {
          color: #42b983;
          font-weight: bold;
          font-size: 24px;
        }
      }

      //a.active {
      //
      //}
    }
  }
}
.el-aside {
  background-color: #545c64;

  .el-submenu,
  /deep/.el-submenu__title,
  .el-menu-item {
    padding-left: 0 !important;
  }
}

.el-main {
  height: calc(100vh - 60px);
}
</style>
